<template>
  <div class="prop propd">
    <div style="height:150px;width:100%"></div>
    <div class="warpprop1">
      <div class="propheader">
        加入资源
        <p class="close1" @click="closeAddSource">关闭</p>
      </div>
      <div class="info1">
        <div class="inputitem">
          <p class="inputname">播出日期</p>
          <el-date-picker
            style="width:300px"
            type="daterange"
            v-model="playtime"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <div class="inputitem">
          <p class="inputname">媒介</p>
          <el-select
            v-model="resource.meidum"
            @change="meijieChange"
            style="width:300px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in meijieData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="info1">
        <div class="inputitem">
          <p class="inputname">频 道</p>
          <el-select
            v-model="resource.channel"
            @change="channelChange($event)"
            style="width:300px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in channelList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="inputitem">
          <p class="inputname">节目</p>
          <el-select
            v-model="resource.show"
            @change="showChange($event)"
            style="width:300px"
            placeholder="请选择"
          >
            <el-option v-for="item in showList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="inputitem">
          <p class="inputname">资源类型</p>
          <el-select
            v-model="resource.sourceType"
            @change="resourceTypeChange($event)"
            style="width:300px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in resourceTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="inputitem">
          <p class="inputname">资源</p>
          <el-select
            v-model="resource.resource"
            @change="resourceChange($event)"
            style="width:300px"
            placeholder="请选择"
          >
            <el-option
              v-for="item in resourceList"
              :key="item.id"
              :label="item.resources_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="inputitem">
          <p class="inputname">频 次</p>
          <el-input style="width:300px;" v-model="resource.rate"></el-input>
        </div>

        <!-- <div class="listtab" style="width:100%;">
          <el-table
            :data="resourceList"
            :cell-style="$rowstyle"
            :header-cell-style="$headerstyle"
            style="width: 100%"
            max-height="250"
            @selection-change="handleSelectionChange"
          >
          <el-table-column
              type="selection"
              width="45">
            </el-table-column>
            <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
            <el-table-column prop="get_medium.name" label="媒介" align="center"></el-table-column>
            <el-table-column prop="get_media.name" align="center" label="频道"></el-table-column>
            <el-table-column prop="get_resource.name" align="center" label="广告类型"></el-table-column>
            <el-table-column prop="resources_name" align="center" label="资源名称"></el-table-column>
            <el-table-column prop="get_program.name" label="节目位置" align="center"></el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.status==1">草稿</span>
                <span v-if="scope.row.status==2">提交审核</span>
                <span v-if="scope.row.status==3">正常</span>
              </template>
            </el-table-column>
            
          </el-table>
          <el-pagination
            @current-change="handlePageChange"
            :current-page.sync="currentPage"
            :page-size="4"
            layout="prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>-->

        <div class="inputitem"></div>
        <div class="inputitem" style="width:100%;">
          <p class="inputname">时长</p>
          <el-select
            v-model="resource.time"
            @change="timeChange($event)"
            style="width:300px"
            placeholder="请选择"
          >
            <el-option v-for="item in resource.timeList" :key="item.id" :label="item.long" :value="item.id"></el-option>
          </el-select>
        </div>
      </div>
      <div class="pub">
        <div class="inputitem">
          <p class="inputname">费用</p>
          <div class="price" v-if="resource.coastType">
            <el-input style="width:50px;" v-model="resource.coast"></el-input>
            <div class="other">%</div>
            <div class="others" @click="changeCoastType">输入费用</div>
          </div>
          <div class="price" v-else>
            <el-input style="width:50px;" v-model="resource.coast"></el-input>
            <div class="other">万元/月</div>
            <div class="others" @click="changeCoastType">百分比计费</div>
          </div>
        </div>
        <div class="inputitem">
          <p class="inputname">代理费用</p>
          <div class="price" v-if="resource.angentType">
            <el-input style="width:50px;" v-model="resource.agentCoast"></el-input>
            <div class="other">%</div>
            <div class="others" @click="changeAgentType">输入费用</div>
          </div>
          <div class="price" v-else>
            <el-input style="width:50px;" v-model="resource.agentCoast"></el-input>
            <div class="other">万元/月</div>
            <div class="others" @click="changeAgentType">百分比计费</div>
          </div>
        </div>
        <div class="inputitem">
          <p class="inputname">备注</p>
          <div class="price">
            <el-input style="width:300px;" v-model="resource.mark"></el-input>
          </div>
          <el-checkbox v-model="resource.checked">赠播</el-checkbox>
        </div>
      </div>
      <div class="saves">
        <el-button type="primary" @click="add" v-if="!type">加入</el-button>
        <el-button type="primary" @click="save" v-else>保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import VDistpicker from "v-distpicker";
import {
  getChannel,
  getShow,
  GETresource_list,
  getResourceTypeList,
  timeRange
} from "../../../api/Salesman.js";

import { SETDATE } from "@/api/System.js";
import formatEveryDay from "./timeFormat.js";
import data from "../motheds";
import generateUUID from "./uuid.js";
export default {
  props: ["meijieData", "type"],
  data() {
    return {
      resource: {
        playtime: [],
        meidum: "",
        channel: "",
        show: "",
        resource: "",
        rate: "",
        sourceType: [],
        otherTime: "",
        coast: "",
        agentCoast: "",
        mark: "",
        time: "",
        coastType: false,
        angentType: false,
        checked: false,
        meijieName: "",
        pingdaoName: "",
        jiemuName: "",
        ziyuanTypeName: "",
        table_name:"",
        timeList:''
      },
      radio: "",
      channelList: [],
      showList: [],
      playtime: "",
      value: "",
      options: [],
      resourceList: [],
      resourceTypeList: [],
      defaultValue: ""
    };
  },
  methods: {
    changeCoastType() {
      this.resource.coastType = !this.resource.coastType;
    },
    changeAgentType() {
      this.resource.angentType = !this.resource.angentType;
    },
    dellist() {},
    handlePageChange() {},
    meijieChange(e) {
      
      this.channel = "";
      this.show = "";
      this.resource.resource = "";
      let data = {
        medium_id: [e]
      };
      let index = "";
      this.meijieData.forEach((element, i) => {
        if (element.id == e) {
          index = i;
        }
      }); 
      this.resource.meijieName = this.meijieData[index].name;
      this.resource.table_name = this.meijieData[index].table_name; 
      getChannel(data).then(res => {
        if (res.code == 200) {
          this.channelList = res.data;
        }
      });
      this.getResourceList(
        this.resource.table_name,
        this.resource.channel,
        this.resource.show
      );
    },
    channelChange(e) {
      let data = {
        media_id: [e]
      };
      this.show = "";
      this.resource.resource = "";
      let index = "";
      this.channelList.forEach((element, i) => {
        if (element.id == e) {
          index = i;
        }
      });
      this.resource.pingdaoName = this.channelList[index].name;
      getShow(data).then(res => {
        if (res.code == 200) {
          this.showList = res.data;
        }
      });
      this.getResourceList(
        this.resource.table_name,
        this.resource.channel,
        this.resource.show
      );
    },
    showChange(e) {
      this.resource.resource = "";
      let index = "";
      this.showList.forEach((element, i) => {
        if (element.id == e) {
          index == i;
        }
      });
      this.resource.jiemuName = this.showList[index].name;
      this.resource.show = e;
      this.getResourceList(
        this.resource.table_name,
        this.resource.channel,
        this.resource.show
      );
    },
    resourceTypeChange(e) {
      let index = "";
      this.resourceTypeList.forEach((element, i) => {
        if (element.id == e) {
          index = i;
        }
      });
      this.resource.ziyuanTypeName = this.resourceTypeList[index].name;
      this.getResourceList(
        this.resource.table_name,
        this.resource.channel,
        this.resource.show,
        this.resource.sourceType
      );
    },
    resourceChange(e) {
      let index = "";
      this.resourceList.forEach((element,i) => {
        if (element.id == e) {
          index = i;
        }
      });
      this.resource.ziyuanName = this.resourceList[index].resources_name;
      if (this.resourceList[index].get_door) {
        this.resource.bumenName = this.resourceList[index].get_door.name;
        this.resource.bumenID = this.resourceList[index].get_door.id;
      } else {
        this.resource.bumenName = "";
      }
    },
    closeAddSource() {
      this.$emit("closeAddSource");
    },
    getResourceList(table_name, media_id, program_id, resources_id) {
      let data = {
        media_id: media_id,
        table_name: table_name,
        resources_id: resources_id,

        program_id: program_id,
        search_word: "",
        per: 9999999
      };
      GETresource_list(data).then(res => {
        if (res.code == 200) {
          this.currentPage = res.data.current_page;
          this.total = res.data.total;
          this.resourceList = res.data.data;
        }
      });
    },
    getResourceType() {
      getResourceTypeList({}).then(res => {
        if (res.code == 200) {
          this.resourceTypeList = res.data;
        }
      });
      this.getResourceList(
        this.resource.meidum,
        this.resource.channel,
        this.resource.show
      );
    },
    add() {
      this.resource.playTimeOrange = this.playtime;
      this.resource.playTimeOrangeTransForm = this.playtime.join("~");
      this.resource.id = generateUUID();
      let data = this.resource;
      if (data.coast == "") {
        this.$message.error("输入费用");
      } else if (data.resource == "") {
        this.$message.error("请选择资源");
      } else if (data.playtime == "") {
        this.$message.error("请选择时间");
      } else {
        this.$emit("addClick", data);
      }
    },
    handleTimeList(id){
      let data = {
        medium_public_id:id
      }
      timeRange({...data}).then(res=>{
        if (res.code == 200) {
          this.resource.timeList = res.data
        }else{
          this.resource.resource = ''
          this.$message.error('获取资源时间错误，请重新选择')
        }
      })
    },
    save() {
      this.resource.playTimeOrange = this.playtime;
      this.resource.playTimeOrangeTransForm = this.playtime.join("~");
      let data = this.resource;
      if (data.coast == "") {
        this.$message.error("输入费用");
      } else if (data.resource == "") {
        this.$message.error("请选择资源");
      } else if (data.playtime == "") {
        this.$message.error("请选择时间");
      } else {
        this.$emit("editClick", data);
      }
    }
  },
  watch: {
    backResource(val, oldVal){
      if (val != '') {
        this.handleTimeList(val)
      }
    },
    radio(val, oldVal) {
      switch (val) {
        case "1":
          this.resource.time = "5";
          break;
        case "2":
          this.resource.time = "10";
          break;
        case "3":
          this.resource.time = "15";
          break;
        case "4":
          this.resource.time = "30";
          break;
        case "5":
          this.resource.time = this.resource.otherTime;
          break;
        default:
          break;
      }
    },
    playtime(val, oldVal) {
      return (this.resource.playtime = formatEveryDay(val[0], val[1]));
    }
    // type(val,oldVal){

    //   console.log(val)
    //   if (val) {
    //     // this.resource = val
    //     this.$set(this,'resource',val)
    //   }
    // }
  },
  computed: {
    backResource(){
      return this.resource.resource
    }
  },
  mounted() {
    if (this.type) {
      this.resource = { ...this.type };
      switch (this.type.time) {
        case "5":
          this.radio = "1";
          break;
        case "10":
          this.radio = "2";
          break;
        case "15":
          this.radio = "3";
          break;
        case "30":
          this.radio = "4";
          break;
        case "5":
          this.radio = "5";
          this.resource.time = this.type.otherTime;
          break;
        default:
          break;
      }
      this.playtime = this.resource.playtime;
    }
    this.getResourceType();
  }
};
</script>
<style lang="scss" scoped>
.close1 {
  cursor: pointer;
}
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.searchlist {
  width: 97%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 50%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    .name {
      width: 110px;
    }
    .click {
      color: #169bd5;
    }
  }
  .require {
    width: 100%;
    display: flex;
    margin-top: 30px;
    .name {
      width: 110px;
    }
  }
}
.listitem {
  width: 97%;
  margin: 0 auto;
  margin-top: 30px;
  .headertitles {
    display: flex;
    align-items: center;
    .adds {
      color: #169bd5;
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .tablists {
    width: 95%;
    padding-left: 5%;
    margin-top: 20px;
  }
}
.otherfile {
  width: 97%;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  .filename {
    width: 200px;
  }
}
.btom {
  width: 500px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  margin-bottom: 200px;
}

.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.warpprop {
  width: 600px;
  height: 420px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .info {
    display: flex;
    align-items: center;
    width: 90%;
    p {
      width: 90px;
    }
    .topinfo {
      width: 50%;
      align-items: center;
      display: flex;
    }
  }
  .listtab {
    margin: 0 auto;
    // width: 500px;
    width: 90%;
  }
  .getmoney {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    .addsave {
      margin: 0 auto;
      width: 50px;
      margin-top: 30px;
    }
    .addsave1 {
      margin: 0 auto;
      width: 200px;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
    }
  }
}
.propd {
  z-index: 999;
  // display: none;
  .warpprop1 {
    // background: blue;
    background: #fff;
    margin: 0 auto;
    border-radius: 10px;
    width: 800px;
    padding-bottom: 30px;
    // background: red;
    // overflow: auto;
    // height: 500px;

    // height: 100%;
    .tabslist {
      width: 90%;
      margin: 0 auto;
      .block {
        margin-top: 0;
      }
    }
    .info1 {
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .inputitem {
        width: 50%;
        display: flex;
        align-items: center;
        .inputname {
          width: 90px;
          margin-left: 20px;
        }
      }
    }
    .saves {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
    }
    .pub {
      width: 90%;
      margin: 0 auto;

      .inputitem {
        width: 70%;
        display: flex;
        align-items: center;
        .inputname {
          width: 160px;
          margin-left: 20px;
        }
        .price {
          height: 100%;
          display: flex;
          align-items: center;
          .other {
            margin-left: 3px;
          }
          .others {
            color: #169bd5;
            margin-left: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>